<template>
  <el-dialog width="1200px" title="选择库区" center :visible.sync="dialogVisible" :before-close="close">
    <el-form align="left" :model="formInline" label-width="140px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="重量超过：">
              <el-input maxlength="20" show-word-limit v-model.number="formInline.weight">
                <template slot="append">kg</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="体积超过：">
              <el-input maxlength="20" show-word-limit v-model.number="formInline.volume">
                <template slot="append">m<sup>3</sup></template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    <div class="partition-wrap">
      <!-- 左侧筛选框 start -->
      <div class="left-column">
        <div class="filter-form">
          <label>库区编码：</label>
          <el-input maxlength="20" show-word-limit v-model="partitioncode" size="mini" clearable></el-input>
        </div>
        <el-button type="primary" @click="search" size="mini">{{$t('m.query')}}</el-button>
      </div>
      <!-- 左侧筛选框 end -->
      <!-- 右侧库区列表 start -->
      <el-row>
        <el-checkbox-group v-model="checkList">
          <el-col :span="4" v-for="item in fitterPartitionList" :key="item.partitionid">
            <el-checkbox :label="item.partitionid">{{item.partitionname}}</el-checkbox>
          </el-col>
        </el-checkbox-group>
      </el-row>
      <!-- 右侧库区列表 end -->
    </div>
    <div class="choosen-list">
      <div class="left-column">已选择库区：</div>
      <el-row>
        <el-col :span="4" v-for="item in choosenList" :key="item.partitionid">
          <el-tag :key="item.partitionid" :type="item.type" effect="dark">{{ item.partitionname }}</el-tag>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-col :span="24" align="center">
        <el-button size="mini" type="primary" @click="save">{{$t('m.confirm')}}</el-button>
        <el-button size="mini" @click="close">{{$t('m.cancel')}}</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
export default {
  name:'forklift-popup',
  props:['dialogVisible','detail'],
  data(){
    return {
      formInline:{
        weight:0, // 重量
        volume:0 // 体积
      },
      partitionList:[], // 默认库区列表
      fitterPartitionList:[], // 筛选过后的库区列表
      partitioncode:'', // 库区编码
      checkList:[], // 当前选中库区
      btnLoading:false // 控制按钮loading，防止重复提交
    }
  },
  mounted(){
    this.getData()
  },
  computed:{
    choosenList(){
      let result = this.partitionList.filter((item)=>{
        return this.checkList.includes(item.partitionid)
      })
      return result.reverse()
    }
  },
  methods:{
    close(){
      this.$emit('close')
    },
    // 获取所有库区list
    getData(){
      let warehouseid = this.$store.state.basicInfo.warehouseInfo.id
      let options = {
        method:'get',
        url:`/partition/list/${warehouseid}`
      }
      this.$axios(options).then(({ data }) => {
        this.partitionList = this.cloneObject(data.list)
        this.fitterPartitionList = this.cloneObject(data.list)
        Object.assign(this.formInline,{weight:this.detail.weight,volume:this.detail.volume}) // 反显重量与体积
        this.checkList = this.detail.partitionids
        if (!this.partitionList.length)
          return this.callbackMessage(this.$t('m.nodata'))
      })
    },
    // 筛选库区
    search(){
      this.fitterPartitionList = this.partitionList.filter((item)=>{
        return item.partitioncode.includes(this.partitioncode)
      })
    },
    //  设置使用叉车的库区
    save(){
      if(isNaN(this.formInline.weight)) return this.callbackMessage('重量必须为数值格式')
      if(isNaN(this.formInline.volume)) return this.callbackMessage('体积必须为数值格式')
      let options = {
        method:'post',
        url:`/parametersettings/parmsetting4forklift`,
        data:Object.assign({},this.formInline,{partitionids:this.checkList.join(',')})
      }
      this.btnLoading = true
      this.$axios(options).then(({ message }) => {
        this.btnLoading = false
        this.callbackMessage(message,'success')
        this.$emit('callback')
        this.$emit('close')
      }).catch(()=>{
        this.btnLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-row{width: 100%;}
.el-col{margin-bottom: 4px;}
.partition-wrap,.choosen-list{
  border: 1px solid #dcdfe6; border-left: 0; border-right: 0; padding: 20px 0; display: flex;
}
.partition-wrap{
  border-bottom: 0;
  .left-column{text-align:center;}
  .filter-form{
    margin-bottom: 20px; display: flex; align-items: center;
    ::v-deep .el-input{flex: 1;}
  }
}
.choosen-list{
  margin-bottom: 20px;
  .left-column{text-align: right;}
}
.left-column{
  width: 280px; border-right: 1px solid #dcdfe6; padding-right: 20px; margin-right: 20px; flex-shrink: 0;
}
</style>